<template>
  <teleport :to="to">
    <div
      class="myDialog"
      ref="myDialog"
      :style="{
        top: position.top,
        left: position.left,
        width: width,
        height: height
      }"
    >
      <div class="title-bar flex justify-between" @mousedown="startDrag">
        <slot name="title">
          <div class="title">操作标题</div>
        </slot>

        <div class="action flex">
          <button
            @click="handleFullWindow"
            class="mr-2 w-[30px] flex items-center justify-center hover:(bg-[#eee])"
          >
            <SvgIcon
              :icon="isFull ? 'suofang' : 'jujiao'"
              size="18px"
            ></SvgIcon>
          </button>
          <button
            @click="closeDialog"
            class="w-[30px] flex items-center justify-center hover:(bg-[#eee])"
          >
            <SvgIcon icon="chacha" size="18px"></SvgIcon>
          </button>
        </div>
      </div>

      <div class="resize-handle" @mousedown="startResize">
        <SvgIcon icon="icon_16h_tuolajian"></SvgIcon>
      </div>

      <div class="flex-1 overflow-auto content">
        <slot></slot>
      </div>
    </div>
  </teleport>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const props = withDefaults(
  defineProps<{
    defaultWidth?: string
    defaultHeight?: string
    to?: string
  }>(),
  {
    defaultWidth: '400px',
    defaultHeight: '200px',
    to: 'body'
  }
)

const width = ref(props.defaultWidth)
const height = ref(props.defaultHeight)

const isDragging = ref(false)
const isResizing = ref(false)
const startX = ref(0)
const startY = ref(0)
const startWidth = ref(0)
const startHeight = ref(0)
const isFull = ref(false)
const saveInfo = reactive({
  top: '0px',
  left: '0px',
  width: '400px',
  height: '200px'
})
const myDialog = ref<any>()
const position = ref({
  top: '40%',
  left: '40%'
})

onMounted(() => {
  // width.value = props.defaultWidth
  // height.value = props.defaultHeight
  // nextTick(() => {
  //   setTimeout(() => {
  //     position.value.top =
  //       Math.floor(window.innerHeight / 2) -
  //       Math.floor(myDialog.value.offsetHeight / 2) +
  //       'px'

  //     position.value.left =
  //       Math.floor(window.innerWidth / 2) -
  //       Math.floor(myDialog.value.offsetWidth / 2) +
  //       'px'
  //   }, 100)
  // })

  requestAnimationFrame(() => {
    position.value.top =
      Math.floor(window.innerHeight / 2) -
      Math.floor(myDialog.value.offsetHeight / 2) +
      'px'

    position.value.left =
      Math.floor(window.innerWidth / 2) -
      Math.floor(myDialog.value.offsetWidth / 2) +
      'px'
  })
})

const emits = defineEmits<{
  (e: 'close'): void
}>()

const startDrag = (e: MouseEvent) => {
  // console.log(myDialog.value.left, position.value.left)
  // console.dir(myDialog.value.offsetLeft)

  isDragging.value = true
  startX.value = e.clientX - myDialog.value.offsetLeft
  startY.value = e.clientY - myDialog.value.offsetTop
  document.addEventListener('mousemove', drag)
  document.addEventListener('mouseup', stopDrag)
}

const drag = (e: MouseEvent) => {
  e.preventDefault()
  e.stopPropagation()
  if (isDragging.value) {
    let newLeft = e.clientX - startX.value
    if (newLeft < 0 && Math.abs(newLeft) > myDialog.value.offsetWidth) {
      newLeft = -myDialog.value.offsetWidth
    }
    position.value.left = newLeft + 'px'
    let newTop = e.clientY - startY.value
    if (newTop < 0) {
      newTop = 0
    }
    if (newTop > window.innerHeight) {
      newTop = window.innerHeight - 30
    }
    position.value.top = newTop + 'px'
  }
}

const stopDrag = () => {
  isDragging.value = false
  document.removeEventListener('mousemove', drag)
  document.removeEventListener('mouseup', stopDrag)
}

const startResize = (e: MouseEvent) => {
  isResizing.value = true
  startWidth.value = myDialog.value.offsetWidth
  startHeight.value = myDialog.value.offsetHeight
  startX.value = e.clientX
  startY.value = e.clientY
  document.addEventListener('mousemove', resize)
  document.addEventListener('mouseup', stopResize)
}

const resize = (e: MouseEvent) => {
  e.preventDefault()
  e.stopPropagation()
  if (isResizing.value) {
    width.value = startWidth.value + (e.clientX - startX.value) + 'px'
    height.value = startHeight.value + (e.clientY - startY.value) + 'px'
  }
}

const stopResize = () => {
  isResizing.value = false
  document.removeEventListener('mousemove', resize)
  document.removeEventListener('mouseup', stopResize)
}

const handleFullWindow = () => {
  if (isFull.value) {
    isFull.value = false
    position.value.top = saveInfo.top
    position.value.left = saveInfo.left
    width.value = saveInfo.width
    height.value = saveInfo.height
  } else {
    isFull.value = true

    saveInfo.top = position.value.top
    saveInfo.left = position.value.left
    saveInfo.width = width.value
    saveInfo.height = height.value

    position.value.top = '0px'
    position.value.left = '0px'
    width.value = '100%'
    height.value = '100%'
  }
}

const closeDialog = () => {
  // 可以根据需要进行其他操作，比如触发关闭事件
  emits('close')
}
</script>

<style lang="scss" scoped>
.myDialog {
  z-index: 999;
  box-shadow: 0 6px 40px 0 rgba(0, 0, 0, 0.25);
  transition: all 0.1s;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  position: absolute;
  background-color: #fff;

  :deep(.grent-btn) {
    outline: none;
    border: 0;
    background: -webkit-linear-gradient(-200deg, #006cfa, #1acbff);
    // transition: all 1s;
    &:hover {
      background: -webkit-linear-gradient(-200deg, #0059ce, #00afe2);
    }
    .n-button__border,
    .n-button__state-border {
      border: none;
    }
  }

  // 渐变tabs的下边框
  :deep(.n-tabs-bar) {
    border-radius: 4px;
    background: -webkit-linear-gradient(-200deg, #006cfa, #1acbff);
    height: 3px;
    box-shadow: 0 1px 4px rgba(24, 144, 255, 0.3);
  }

  // 数字计数器后缀穿透
  :deep(.n-input-number-suffix) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    margin-right: 0;
    background: #fafafa;
    border: 1px solid #ddd;
    font-size: 12px;
  }

  // input的字体大小
  :deep(.n-form-item .n-form-item-label) {
    font-size: 13px;
  }
  :deep(.n-input__input-el) {
    font-size: 13px;
  }
  :deep(.n-input .n-input__placeholder) {
    font-size: 13px !important;
  }

  // 选择器的字体大小
  :deep(.n-base-selection-placeholder__inner) {
    font-size: 13px;
  }

  :deep(.n-tree-select-menu) {
    font-size: 13px;
  }

  // alert警告信息字体大小
  :deep(.n-alert-body__content) {
    font-size: 13px;
  }

  :deep(.n-checkbox__label) {
    font-size: 13px;
  }

  // 树形展开
  :deep(.n-tree .n-tree-node) {
    height: 30px;
    align-items: center;
  }

  :deep(.n-tree-node-wrapper) {
    padding: 0;
  }

  // 按钮组件字体大小
  // :deep(.n-button__content) {
  //   font-size: 13px;
  // }

  // 复选按钮组分割线不对其bug解决
  :deep(.n-radio-group .n-radio-group__splitor) {
    vertical-align: baseline;
  }

  // 复选款按钮组激活时样式修改
  :deep(.n-radio-group .n-radio-button.n-radio-button--checked) {
    color: var(--n-button-color-active);
    background: var(--n-button-text-color-active);
    border-color: var(--n-button-border-color-active);
  }

  :deep(.n-radio__label) {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
  }

  @media (max-width: 768px) {
    :deep(label) {
      margin: 0;
    }

    :deep(.n-radio-group .n-radio-group__splitor) {
      vertical-align: middle;
    }
  }
}

.title-bar {
  padding-left: 5px;
  background-color: #fafafc;
  height: 30px;
  cursor: move;
  border-bottom: 1px solid #eee;
}

.resize-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: transparent;
  cursor: nwse-resize;
  bottom: 0;
  right: 0;
}
</style>
